import React, { PropTypes, Component } from 'react'
import classnames from 'classnames'
import Sketch from './Sketch'

class ComBtn extends Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      displayHeightIpt:false,
      displayBackCpt:false,
      btnVisible:this.props.btnVisible||true,
      elHeight:this.props.elHeight
    }
  }

 handleSubmit(e) {
    const text = e.target.value.trim()
    if (e.which === 13) { 
      this.props.handleHeight(this.props.id,parseInt(e.target.value))
    }
  }

  handleChange(e) {
    this.setState({ elHeight: e.target.value })
  }

  handleBlur(e) {
 
    
  }


  showHeightIpt(e){
     this.setState({
      displayHeightIpt:!this.state.displayHeightIpt
    })
  }
  showBackCpt(e){
     this.setState({
        displayBackCpt:!this.state.displayBackCpt
    })
  }
  render() {
    return (
      <div className="btn-group">
        <div className={classnames({
                  'btn':true,
                  'btn-height':true,
                  'visible': this.state.btnVisible
                })}>
          <div className="btn-height-wrap">
             <span className="btn-txt"
                  onClick={this.showHeightIpt.bind(this)}
                  >
                  设置高度
             </span>
             <input className={
                classnames({
                  'ipt-height':true,
                  'visible': this.state.displayHeightIpt
                })}
                type="text"
                autoFocus="true"
                value={this.state.elHeight}
                onBlur={this.handleBlur.bind(this)}
                onChange={this.handleChange.bind(this)}
                onKeyDown={this.handleSubmit.bind(this)} />
          </div>
        </div> 
        <div className={classnames({
                  'btn':true,
                  'btn-back':true,
                  'visible': this.state.btnVisible
                })}>
          <div className="btn-height-wrap">
             <span className="btn-txt"
                  onClick={this.showBackCpt.bind(this)}
                  >
                  设置背景
             </span>
             {this.state.displayBackCpt?<Sketch  
                  id={this.props.id}
                  color={this.props.backgroundColor}
                  handleBackColor={this.props.handleBackColor.bind(this)}
                  handleBackImage={this.props.handleBackImage.bind(this)}
              />: null}
            
          </div>
        </div> 
      </div>
      
    )
  }
}

ComBtn.propTypes = {

}

export default ComBtn
